<template>
  <!-- 胶囊 -->
  <div>
    
  <div class="capsule">
    <van-icon size="20" @click="showShare=true" name="ellipsis" />
    |
    <van-icon size="20" @click="handleClose" name="close" />
  </div>
  <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" />

  </div>
</template>

<script>
export default {
  name:'CapsuleCom',
  data(){
    return {
      showShare:false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
    }
  },
  methods:{
    // handleShare(){},
    handleClose(){
      window.open('','_self').close()
    },
  }
}
</script>

<style lang="scss" scoped>
.capsule{
  width: 80px;
  height: 30px;
  border-radius: 33px;
  background-color: rgba(#000000, 0.3);
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: rgba(#fff, 0.3);
}
::v-deep .van-share-sheet__options{
  justify-content: space-around;
}
</style>